<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script src="layui/layui.js"></script>
    <style>
        .box {
            display: flex;
            height: 100vh;
            box-sizing: border-box;
        }

        nav {
            width: 230px;
        }

        section {
            width: calc(100vw - 230px);
            height: calc(100vh - 50px);
            box-sizing: border-box;
        }

        section > iframe {
            border: 0
        }
        .top-user-info{
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            text-align: right;
            margin-right: 20px;
        }
    </style>
</head>
<body>

<div class="box">
    <nav class="menu">
        <ul class="layui-nav layui-nav-tree layui-nav-side"></ul>
    </nav>
    <section>
        <div class="top-user-info">
            <span class="user-info"></span>
            <span><a style="color: #1e9fff" href="/user/loginout">退出</a></span>
        </div>
        <iframe src="main.html" name="main" width="100%" height="99%"></iframe>
    </section>
</div>

<script>
    layui.use(['layer', 'form'], function () {
        let layer = layui.layer
            , form = layui.form
            , element = layui.element

        // 菜单拼接
        fetch('/menu/menu_role_id', {headers: {'Content-Type': "application/json"}})
            .then(resp => resp.json())
            .then(data => {
                document.querySelector(".user-info").innerHTML = `欢迎您，${data.data.userName}`
                let lis = ""
                data.data.menus.forEach(item => {
                    lis += `
                    <li class="layui-nav-item layui-nav-itemed">
                        <a href="javascript:;">${item.menuName}</a>
                        <dl class="layui-nav-child">`
                    item.children.forEach(citem=>{
                        lis += `<dd><a href="${citem.url}" target="main">${citem.menuName}</a></dd>`
                    })
                    lis += `</dl></li>`
                })
                let menu = document.querySelector(".menu>ul")
                menu.innerHTML = lis

                element.render('nav');
            })
    });
</script>

</body>
</html>